<template>
  <div class="box">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="detail">
      <p>
        商品编号：<van-tag type="danger">{{ $route.query.id }}</van-tag>
      </p>
      <img :src="$route.query.src" alt="" />
      <p>
        商品描述：<van-tag type="danger">{{ $route.query.text }}</van-tag>
      </p>
      <p>
        商品价格：<van-tag type="danger">￥{{ $route.query.price }}.00</van-tag
        > 元
      </p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.push({ name: "home" });
    },
  },
  created() {
    console.log("商品编号", this.$route.query.id);
    console.log("商品图片路径:", this.$route.query.src);
    console.log("商品描述:", this.$route.query.text);
    console.log("商品价格:", this.$route.query.price);
  },
};
</script>

<style scoped>
.box {
  background-color: rgb(240, 196, 196);
  width: 100%;
  height: 100%;
}
.box .detail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box .detail img {
  width: 150px;
  height: 150px;
}
.box .detail p {
  font-size: 18px;
  font-weight: bolder;
  padding: 15px;
}
.box .detail p:nth-of-type(2) .van-tag {
  line-height: 20px;
}
</style>